<template>
  <PageLayout class="p-24">
    <a-card>
      <a-descriptions title="门店信息">
        <a-descriptions-item label="门店名称">{{
          detail.name
        }}</a-descriptions-item>
        <a-descriptions-item label="开店时间">{{
          detail.signTime
        }}</a-descriptions-item>
        <a-descriptions-item label="门店ID">{{
          detail.id
        }}</a-descriptions-item>
        <a-descriptions-item label="商铺状态">{{
          detail.status == 0 ? "正常" : "禁用"
        }}</a-descriptions-item>
        <!-- <a-descriptions-item label="总信用分">{{
          detail.totalAmount
        }}</a-descriptions-item> -->
        <a-descriptions-item label="剩余信用分">{{
          detail.balance
        }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <!-- <a-card>
      <a-descriptions title="门店绑定信息">
        <a-descriptions-item label="代理商名称">{{
          detail.field1
        }}</a-descriptions-item>
        <a-descriptions-item label="代理商编号">{{
          detail.agentId
        }}</a-descriptions-item>
        <a-descriptions-item label="商户名称">{{
          detail.field3
        }}</a-descriptions-item>
        <a-descriptions-item label="客户专员">{{
          detail.field4
        }}</a-descriptions-item>
        <a-descriptions-item label="客户专员编号">{{
          detail.customerSpecialistId
        }}</a-descriptions-item>
        <a-descriptions-item label="商户ID">{{
          detail.field4
        }}</a-descriptions-item>
        <a-descriptions-item label="区域经理">{{
          detail.field4
        }}</a-descriptions-item>
        <a-descriptions-item label="商户联系方式">{{
          detail.telephone
        }}</a-descriptions-item>
      </a-descriptions>
    </a-card> -->
    <a-card>
      <div class="d-flex j-sb">
        <a-descriptions title="账号信息"> </a-descriptions>
        <a-button type="primary" @click="visible = true">关联账号</a-button>
      </div>
      <BasicTable
        :immediate="false"
        :columns="columns1"
        :data-source="bindUserList"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a class="btn" @click="remove(record.id)">删除</a>
          </template>
        </template>
      </BasicTable>
    </a-card>
    <a-card>
      <a-descriptions title="设备信息">
        <template #extra>
          <div>当前门店设备总数：{{ detail.deviceNum }}</div>
        </template>
      </a-descriptions>
      <div class="w-100 overflow-h">
        <BasicTable
          ref="tableRef"
          :query-params="{ shopId: route.query.id }"
          :apiFetch="postDevicePage"
          :columns="columns2"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'residue'">
              <div class="d-flex">
                洗发水:<a-progress
                  style="flex: 1; margin-left: 10px"
                  :percent="record?.hampoo || 0"
                  :show-info="false"
                />
              </div>
              <div class="d-flex">
                养发液:<a-progress
                  style="flex: 1; margin-left: 10px"
                  :percent="record?.hairtonic || 0"
                  :show-info="false"
                />
              </div>
              <div class="d-flex">
                护发素:<a-progress
                  style="flex: 1; margin-left: 10px"
                  :percent="record?.conditioner || 0"
                  :show-info="false"
                />
              </div>
            </template>
            <!-- <template v-if="column.key === 'action'">
              <a
                class="btn"
                @click="
                  router.push({
                    path: '/device/detail',
                    query: {
                      id: route.query.id,
                    },
                  })
                "
                >查看详情</a
              >
            </template> -->
          </template>
        </BasicTable>
      </div>
    </a-card>
    <a-card>
      <a-descriptions title="财务订单记录">
        <!-- <template #extra>
          <div>当前门店设备总数：5</div>
        </template> -->
      </a-descriptions>
      <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
      <!-- <div class="d-flex mb-24 grid-gap10 type-list">
        <div>全部</div>
        <div>已支付</div>
        <div>未支付</div>
      </div> -->
      <BasicTable
        ref="financeTableRef"
        :query-params="queryData"
        :columns="columns3"
        :apiFetch="postFinancialBillPage"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'actions'">
            <a-space class="space-btn--box" :size="10">
              <a class="btn" @click="showDetail(record)">查看详情</a>
            </a-space>
          </template>
        </template>
      </BasicTable>
    </a-card>

    <a-modal
      v-model:visible="visible"
      title="关联账号"
      :width="500"
      @ok="bindAccount"
    >
      <a-select
        v-model:value="shopUserIds"
        mode="multiple"
        style="width: 100%"
        placeholder="请选择"
        :options="accountList"
      ></a-select>
    </a-modal>

    <!-- <DetailModal ref="detailModalRef" :data="dataDetail"></DetailModal> -->
  </PageLayout>
</template>

<script setup>
import {
  postShopDetail,
  postShopUserList,
  postShopBoundUserList,
  postShopBoundUser,
  postShopBoundUserDelete,
  postDevicePage,
  postFinancialBillPage,
} from "@/api/common";
import { comfirmModal } from "@/hooks/useModal";
// import DetailModal from "@/views/finance/manage/components/detail-modal.vue";
import { message } from "ant-design-vue";
import { reactive } from "vue";
const route = useRoute();
const detail = ref({});
const accountList = ref([]);
const bindUserList = ref([]);
onMounted(() => {
  postShopDetail({ id: route.query.id }).then((res) => {
    detail.value = res.data;
  });

  getBoundUserList();
});
const visible = ref(false);
watch(
  () => visible.value,
  () => {
    if (visible.value) {
      postShopUserList().then((res) => {
        let list = res.data || [];
        list = list.filter((item) => {
          const bindIdList = bindUserList.value.map((item) => item.id);
          return !bindIdList.includes(item.id);
        });
        accountList.value = list?.map((item) => {
          return {
            ...item,
            label: item.realName,
            value: item.id,
          };
        });
      });
    }
  }
);
const getBoundUserList = () => {
  postShopBoundUserList({ id: route.query.id }).then((res) => {
    bindUserList.value = res.data;
  });
};
const shopUserIds = ref([]);
const bindAccount = () => {
  if (shopUserIds.value?.length) {
    postShopBoundUser({
      shopId: route.query.id,
      shopUserIds: shopUserIds.value,
    }).then((res) => {
      message.success("关联成功");
      shopUserIds.value = undefined;
      visible.value = false;
      getBoundUserList();
    });
  }
};
const remove = (shopUserId) => {
  comfirmModal({
    content: "确认删除该账号",
    onOk() {
      postShopBoundUserDelete({ shopId: route.query.id, shopUserId }).then(
        () => {
          message.success("删除成功");
          getBoundUserList();
        }
      );
    },
  });
};
const queryOptions = ref([
  {
    name: "",
    type: "input",
    value: "",
    placeholder: "订单号",
    filed: "orderNo",
  },
  // {
  //   name: "",
  //   type: "input",
  //   value: "",
  //   placeholder: "门店号",
  //   filed: "shopNo",
  // },
  {
    name: "订单状态",
    type: "select",
    value: [],
    placeholder: "请选择",
    filed: "statusList",
    list: [
      {
        label: "待支付",
        value: 0,
      },
      {
        label: "支付成功",
        value: 1,
      },
    ],
    attrs: { mode: "multiple" },
  },
]);
const columns1 = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "账号",
    dataIndex: "username",
    key: "username",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "角色",
    dataIndex: "roleType",
    key: "roleType",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) => `${record.roleType == 0 ? "管理员" : "员工"}`,
  },
  {
    title: "姓名",
    dataIndex: "realName",
    key: "realName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "手机号",
    dataIndex: "phone",
    key: "phone",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    width: "150px",
    ellipsis: true,
  },
];
const columns2 = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "设备编号",
    dataIndex: "deviceNo",
    key: "deviceNo",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "代理商",
    dataIndex: "username",
    key: "username",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "激活时间",
    dataIndex: "activeTime",
    key: "activeTime",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "使用时长",
    dataIndex: "time",
    key: "time",
    width: "150px",
    ellipsis: true,
  },
  // {
  //   title: "当前原料剩余",
  //   dataIndex: "residue",
  //   key: "residue",
  //   width: "200px",
  //   ellipsis: true,
  // },
  // {
  //   title: "预警",
  //   dataIndex: "warnNum",
  //   key: "warnNum",
  //   width: "150px",
  //   ellipsis: true,
  // },
  // {
  //   title: "设备对应的信用分",
  //   dataIndex: "amount",
  //   key: "amount",
  //   width: "150px",
  //   ellipsis: true,
  // },
  {
    title: "使用状态",
    dataIndex: "useStatus",
    key: "useStatus",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) => `${record.useStatus == 0 ? "正常" : "锁机"}`,
  },
  {
    title: "开机状态",
    dataIndex: "onlineStatus",
    key: "onlineStatus",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) =>
      `${record.onlineStatus == 0 ? "在线" : "离线"}`,
  },
  // {
  //   title: "操作",
  //   dataIndex: "action",
  //   key: "action",
  //   width: "150px",
  //   ellipsis: true,
  //   fixed: "right",
  // },
];
const columns3 = [
  {
    title: "支付订单编号",
    dataIndex: "orderNo",
    key: "orderNo",
    width: "180px",
    ellipsis: true,
  },
  {
    title: "应付金额",
    dataIndex: "totalAmount",
    key: "totalAmount",
    width: "180px",
    ellipsis: true,
  },
  {
    title: "支付状态",
    dataIndex: "status",
    key: "status",
    width: "180px",
    ellipsis: true,
    customRender: ({ record }) => (record.status == 0 ? "待支付" : "支付成功"),
  },

  {
    title: "时间",
    dataIndex: "createTime",
    key: "createTime",
    width: "180px",
    ellipsis: true,
  },
  {
    title: "门店名称",
    dataIndex: "shopName",
    key: "shopName",
    width: "180px",
    ellipsis: true,
  },
  {
    title: "门店ID",
    dataIndex: "shopId",
    key: "shopId",
    width: "180px",
    ellipsis: true,
  },
  {
    title: "地区",
    dataIndex: "province",
    key: "province",
    width: "180px",
    ellipsis: true,
    customRender: ({ record }) => {
      console.log("record", record);
      return `${record.province}/${record.city}/${record.area}`;
    },
  },
  {
    title: "老板姓名",
    dataIndex: "shopRealName",
    key: "shopRealName",
    width: "180px",
    ellipsis: true,
  },
  {
    title: "手机号",
    dataIndex: "shopPhone",
    key: "shopPhone",
    width: "180px",
    ellipsis: true,
  },
  {
    title: "操作",
    dataIndex: "actions",
    key: "actions",
    fixed: "right",
    width: "110px",
    ellipsis: true,
  },
];
const detailModalRef = ref(null);
const dataDetail = ref({});
const showDetail = (record) => {
  dataDetail.value = record;
  setTimeout(() => {
    detailModalRef.value.visible = true;
  }, 0);
};

const financeTableRef = ref(null);
const queryData = reactive({
  shopId: route.query.id,
});
const onQueryDataByParams = (params) => {
  console.log("params", params);
  for (let key in params) {
    queryData[key] = params[key];
  }
  financeTableRef.value.refreshTableData();
};
</script>

<style lang="less" scoped>
.type-list {
}
</style>
